.depositRecords {
  height: 100vh;
  overflow: scroll;
  background: rgba(245, 245, 245, 1);

  .at-modal__action {
    display: flex;
    flex-direction: row;

    button,
    taro-button-core {
      height: 88px;
      font-size: 32px;
      // font-weight: bold;
      color: #218CFF;
      background: #fff;
    }

    button:last-child,
    taro-button-core:last-child {
      height: 88px;
      font-size: 32px;
      // font-weight: bold;
      color: #333 !important;
      margin-top: 0;
      background: #fff;
    }
  }

  .bar {
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 112px;

    .nav {
      height: 88px;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 20vw;

      .deposit-records-item {
        color: #000;
        font-size: 24px;
        margin-top: 30px;
        white-space: nowrap;
      }

      .itemSelected {
        color: #218CFF;
        font-weight: bold;
      }

      .active {
        margin-top: 20px;
        width: 100%;
        align-items: center;
      }

      .activeLine {
        width: 48px;
        height: 4px;
        border-radius: 2px;
        background-color: #218CFF;
      }

      .noActiveLine {
        width: 48px;
        height: 4px;
        background-color: #ffffff;
      }
    }
  }

  .cancel-btn {
    position: absolute;
    right: 20px;
    bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 128px;
    height: 48px;
    background: rgba(255, 255, 255, 1);
    border-radius: 24px;
    border: 1px solid rgba(230, 230, 230, 1);

    .cancel-text {
      font-size: 20px;
      font-weight: 500;
    }
  }

  .depositRecords-list {
    padding: 24px;

    .item {
      position: relative;
      padding: 24px 24px 32px 24px;
      background: rgba(255, 255, 255, 1);
      border-radius: 12px;
      margin-bottom: 24px;

      .header {
        margin-top: 8px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      .money-con {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        font-weight: 600;

        .money-num {
          font-size: 32px;
        }

        .money-icon {
          font-size: 20px;
        }
      }

      .code {
        margin-top: 16px;
        font-size: 24px;
        color: rgba(0, 0, 0, 0.4);
      }

      .type-loading {
        font-size: 24px;
        color: #218CFF;
      }

      .type-error {
        font-size: 24px;
        color: #ff0022;
      }

      .type-success {
        font-size: 24px;
        color: #999;
      }
    }
  }

  .at-modal__footer .at-modal__action {
    display: flex;
    flex-direction: row !important;
  }

  text,
  textarea {
    line-height: normal;
  }
}
